.login-page {
  height: calc(100vh - env(safe-area-inset-bottom));
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .login-page-tabs {
    margin-top: 100rpx;
    display: flex;
    justify-content: space-evenly;
    font-size: 30rpx;
    color: #9d9d9d;
    border-bottom: 2rpx solid #f3f3f3;

    .login-page-tabs-item {
      padding-bottom: 10rpx;
    }

    .login-page-tabs-item-active {
      color: #686868;
      border-bottom: 2rpx solid #969696;
    }
  }

  .login-page-input-region {
    width: 600rpx;
    margin: 0 auto;
    margin-top: 40rpx;

    .login-page-input-region-phone-number {
      display: flex;
      align-items: baseline;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #e0e0e0;

      .login-page-input-region-phone-input {
        margin-left: 25rpx;
      }

      .login-page-input-region-require-verification-code {
        margin-left: auto;
        font-size: 28rpx;
        color: #1989fa;
        padding: 5rpx 20rpx;
        padding-right: 0;
        border-left: 2rpx solid #ddd;
      }

    }

    .login-page-input-region-verification-code {
      display: flex;
      align-items: baseline;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #e0e0e0;

      .login-page-input-region-phone-input {
        margin-left: 25rpx;
      }
    }

    .login-button {
      height: 80rpx;
      width: 600rpx;
      margin: 0 auto;
      margin-top: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #1989fa;
      color: #fff;
      border-radius: 40rpx;
      /* 过渡动画：让颜色/透明度变化更平滑 */
      transition: all 0.2s ease;
      /* 消除点击时默认的灰色背景（微信小程序特有） */
      -webkit-tap-highlight-color: transparent;
      /* 字体加粗，提升视觉权重 */
      font-weight: 500;
      font-size: 32rpx;
      /* 防止文字换行 */
      white-space: nowrap;
    }

    /* 点击按压效果（:active伪类） */
    .login-button-hover {
      /* 背景色加深，模拟按压反馈 */
      background-color: #0f7ae5;
      /* 轻微缩放，增强触感 */
      transform: scale(0.98);
    }

    .registration-button {
      margin-top: 40rpx;
      text-align: center;
      font-size: 32rpx;
      color: #9a9a9a;
    }
  }

  .login-page-input-region-password {
    width: 600rpx;
    margin: 0 auto;
    margin-top: 40rpx;

    .login-page-input-region-phone-number {
      display: flex;
      align-items: baseline;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #e0e0e0;

      .login-page-input-region-phone-input {
        margin-left: 25rpx;
      }

      .login-page-input-region-require-verification-code {
        margin-left: auto;
        font-size: 28rpx;
        color: #1989fa;
        padding: 5rpx 20rpx;
        padding-right: 0;
        border-left: 2rpx solid #ddd;
      }

    }

    .login-page-input-region-verification-code {
      display: flex;
      align-items: baseline;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #e0e0e0;

      .login-page-input-region-phone-input {
        margin-left: 25rpx;
      }
    }

    .login-button {
      height: 80rpx;
      width: 600rpx;
      margin: 0 auto;
      margin-top: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #1989fa;
      color: #fff;
      border-radius: 40rpx;
    }

    .registration-button {
      margin-top: 40rpx;
      text-align: center;
      font-size: 32rpx;
      color: #9a9a9a;
    }

    .forget-button {
      font-size: 30rpx;
      color: #1989fa;
    }
  }

  .bottom-region {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-direction: column;

    .bottom-region-title {
      text-align: center;
      font-size: 28rpx;
      color: #9e9e9e;

    }

    .login-quickly {
      color: #fff;
      background-color: #1989fa;
      height: 60rpx;
      width: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      border-radius: 30rpx;
      margin-top: 25rpx;
    }

    .user-agreement {
      display: flex;
      margin-top: 40rpx;
      font-size: 30rpx;
      color: #676767;
      align-items: center;
    }
  }
}

/* 遮罩层：全屏半透明，居中承载弹窗 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* 半透明黑色 */
  z-index: 999;
  /* 确保层级在页面内容之上 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 弹窗容器 */
.dialog {
  width: 550rpx;
  height: 350rpx;
  background: #fff;
  border-radius: 16rpx;
}

/* 弹窗标题 */
.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-top: 46rpx;
  margin-bottom: 46rpx;
}

/* 内容文字 */
.dialog-content {
  font-size: 24rpx;
  color: #6a6a6a;
  line-height: 40rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 0 39rpx;
}

/* 协议链接文字（粉色） */
.link {
  color: #1989fa;
}

/* 按钮组布局 */
.btn-group {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-around;
}

/* 不同意按钮（粉色边框） */
.btn-disagree {
  width: 200rpx;
  height: 70rpx;
  border-radius: 35rpx;
  border: 2rpx solid #1989fa;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1989fa;
}

/* 同意按钮（粉色背景） */
.btn-agree {
  width: 200rpx;
  height: 70rpx;
  border-radius: 35rpx;
  border: 2rpx solid #1989fa;
  display: flex;
  color: #fff;
  background-color: #1989fa;
  justify-content: center;
  align-items: center;
}